<template>
	<view class="container">
		<view class="nav-warp">
			<view class="back">
				<uv-icon name="arrow-left" color="#333" size="20"></uv-icon>
			</view>
			<view class="title">接乘客</view>
			<view class="back"></view>
		</view>
		<map class="map" name="map" :latitude="currentLocation.latitude" :longitude="currentLocation.longitude" :markers="markers" :polyline="polylineInfo.polyline"></map>
		<view class="footer">
			<view class="top">
				<view class="left">
					<image class="avatar" :src="userIcon" mode="aspectFill"></image>
					<view class="info">
						<view class="anme">
							{{ orderInfo.data.passenger.nickname }}
						</view>
						<view class="phone">
							{{ phoneHide(orderInfo.data.passenger.phone) }}
						</view>
					</view>
				</view>
				<view class="menu-wrap">
					<view class="btn" @click="tellHandle">
						<uv-icon name="phone-fill" color="#fff" size="18"></uv-icon>
					</view>
					<view class="btn" @click="toMap">
						<uv-icon name="map-fill" color="#fff" size="18"></uv-icon>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="row">
					<view class="line"></view>
					<view class="dot"></view>
					<view class="address">&nbsp;&nbsp;我的位置</view>
				</view>
				<view class="row">
					<view class="line dotted"></view>
					<view class="dot"></view>
					<view class="address">【乘客起点】{{ orderInfo.data.start_address }}</view>
				</view>
				<view class="row">
					<view class="dot"></view>
					<view class="address">【乘客终点】{{ orderInfo.data.end_address }}</view>
				</view>
			</view>
			<view class="btm">
				<uv-button color="linear-gradient(to right, #f09366, #ec676f)" size="large" shape="circle" @click="toMap">开始导航</uv-button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import MapNavigation from '@/utils/mapNavigation.js';
import { onLoad, onShow } from '@dcloudio/uni-app';
import driverIcon from '@/static/address_driver.png';
import userIcon from '@/static/address_user.png';
import { orderDetail } from '@/utils/api.js';
import { phoneHide } from '@/utils/index.js';
import useStorage from '@/utils/useStorage';
import TencentMapService from '@/utils/mapServer.js';

// 订单信息
const orderInfo = reactive({
	id: '',
	data: {
		passenger: {
			nickname: '',
			phone: ''
		}
	}
});

// 司机当前位置
const currentLocation = ref({
	latitude: 34.247578,
	longitude: 108.948756,
	name: '西安市'
});

const markers = ref([
	{
		id: 1,
		longitude: 34.247578,
		latitude: 34.247578,
		iconPath: driverIcon,
		width: 30,
		height: 30
	},
	{
		id: 2,
		longitude: '',
		latitude: '',
		iconPath: userIcon,
		width: 30,
		height: 30
	}
]);

const polylineInfo = ref({
	duration: '',
	polyline: []
});

// 拨打电话
function tellHandle() {
	uni.makePhoneCall({
		phoneNumber: orderInfo.data.passenger.phone
	});
}

// 跳转地图
function toMap() {
	// 调用
	let endPoint = {
		latitude: +orderInfo.data.start_lat,
		longitude: +orderInfo.data.start_lnt,
		name: orderInfo.data.start_address
	};

	MapNavigation.navigate(currentLocation.value, endPoint);
}

// 获取订单详情
async function orderDetailAjax() {
	try {
		getLocationHandle();
		const res = await orderDetail({
			order_id: orderInfo.id
		});
		orderInfo.data = res;

		markers.value[1].latitude = +orderInfo.data.start_lat;
		markers.value[1].longitude = +orderInfo.data.start_lnt;

		getDriverUserPlain();
	} catch (error) {
		console.log(error);
	}
}

// 获取司机到用户之间的路线
async function getDriverUserPlain() {
	try {
		// 起点和终点坐标
		const startPoint = { lng: currentLocation.value.longitude, lat: currentLocation.value.latitude };
		const endPoint = { lng: +orderInfo.data.start_lnt, lat: +orderInfo.data.start_lat };

		const res = await TencentMapService.getRoute({ startPoint, endPoint });

		console.log('路线', res);

		polylineInfo.value.duration = res.duration;
		polylineInfo.value.polyline = res.polyline;
	} catch (error) {
		console.log(error);
	}
}

// 获取司机位置
function getLocationHandle() {
	currentLocation.value = useStorage.get('location');

	markers.value[0].latitude = currentLocation.value.latitude;
	markers.value[0].longitude = currentLocation.value.longitude;
}

// 更新当前位置信息
function updateLocation() {}

onShow(() => {
	updateLocation();
});

onLoad((options) => {
	if (options.order_id) {
		orderInfo.id = options.order_id;
		orderDetailAjax();
	}
});
</script>

<style scoped lang="scss">
.container {
	--footerH: 550upx;
	.nav-warp {
		--nav-height: 44px;
		width: 100%;
		height: calc(var(--nav-height) + var(--status-bar-height));
		padding-top: var(--status-bar-height);
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
		// backdrop-filter: blur(10px);
		.back {
			width: var(--nav-height);
			height: var(--nav-height);
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.title {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32upx;
			color: #333;
			font-weight: bold;
		}
	}
	.map {
		width: 100vw;
		height: calc(100vh - var(--footerH));
	}
	.footer {
		--top: 80upx;
		width: 100%;
		height: calc(var(--footerH) + var(--top));
		margin-top: calc(var(--top) * -1);
		background: $linear-card;
		border-radius: 40upx 40upx 0 0;
		position: relative;
		z-index: 999;
		padding: 28upx 28upx calc(28upx + env(safe-area-inset-bottom));
		display: flex;
		flex-direction: column;
		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left {
				display: flex;
				align-items: center;
				.avatar {
					$size: 80upx;
					width: $size;
					height: $size;
				}
				.info {
					flex: 1;
					padding-left: 12upx;
					color: #fff;
					.name {
						font-size: 20upx;
						font-weight: bold;
					}
					.phone {
						font-size: 32upx;
					}
				}
			}
			.menu-wrap {
				display: flex;
				align-items: center;
				gap: 32upx;
				.btn {
					$size: 80upx;
					width: $size;
					height: $size;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: rgba(255, 255, 255, 0.05);
				}
			}
		}
		.content {
			flex: 1;
			border-radius: 20upx;
			background-color: rgba(255, 255, 255, 0.05);
			margin: 28upx 0;
			padding: 28upx 56upx;
			display: flex;
			flex-direction: column;
			gap: 20upx;
			.row {
				flex: 1;
				display: flex;
				align-items: center;
				color: #fff;
				gap: 20upx;
				position: relative;
				&:last-child {
					.dot {
						border: 4upx solid #fff;
						background: none;
					}
					.line {
					}
				}
				.dot {
					$size: 16upx;
					width: $size;
					height: $size;
					border-radius: 50%;
					background-color: #fff;
				}
				.line {
					height: 58upx;
					border-left: 1px solid #fff;
					position: absolute;
					top: 60upx;
					left: 6upx;
					opacity: 0.8;
					&.dotted {
						border-left: 1px dotted #fff;
					}
				}
				.address {
					width: 550upx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
	}
}
</style>
